<template>
  <div class="inventoryList auditCmpt">
    <!-- 查询表单 -->
    <div class="form-baseinfo">
      <LPSearchBar
        v-model="searchModel"
        :search-data="searchData"
        label-width="100px"
        @handleSearchSubmit="handleSearchSubmit"
        @handleSearchReset="handleSearchReset"
      />
    </div>
    <div class="form-baseinfo">
      <div class="btn_area">
        <el-button
          v-hasPermi="['LaborProtection.UserAmountDisStandard.Recharge']"
          size="medium"
          type="primary"
          @click="batchRecharge"
          >批量充值</el-button
        >
        <el-button
          v-hasPermi="['LaborProtection.UserAmountDisStandard.Delete']"
          size="medium"
          type="danger"
          @click="batchDelete"
          >批量删除</el-button
        >
        <el-button
          v-hasPermi="['LaborProtection.UserAmountDisStandard.lookOperLog']"
          size="medium"
          type="primary"
          @click="operationLog"
          >操作记录</el-button
        >
        <el-button
          v-hasPermi="['LaborProtection.UserAmountDisStandard.NoRecharge']"
          size="medium"
          type="primary"
          @click="batchNotRecharge"
          >批量未充值</el-button
        >
        <el-button
          v-hasPermi="['LaborProtection.UserAmountDisStandard.Export']"
          size="medium"
          type="primary"
          @click="exportInfo"
          >导出</el-button
        >
      </div>
      <!-- 表格列表 -->
      <LPTablePage
        ref="tableMain"
        selection
        :show-index="false"
        :show-indexfixed="true"
        index-label="序号"
        :table-data="tableData"
        :table-column="tableColumn"
        :total="total"
        :current-page="currentPage"
        align="center"
        class="table"
        @handleSizeChange="handleSizeChange"
        @handleSelectionChange="handleSelectionChange"
        @handleCurrentChange="handleCurrentChange"
      >
        <template slot="couponId" slot-scope="{ row }">
          <el-link type="primary" @click="couponLinkClick(row)">查看详情</el-link>
        </template>
        <!-- <template slot="cz" slot-scope="{row}">
          <el-button v-hasPermi="['LaborProtection.APICostOrgRelation.Update']" type="text"
            @click="handColumnClick(row, 'update')">修改</el-button>
          <el-button v-hasPermi="['LaborProtection.APICostOrgRelation.Delete']" type="text"
            @click="handColumnClick(row, 'delete')">删除</el-button>
        </template> -->
      </LPTablePage>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisvible"
      :width="dialogWidth"
      :before-close="dilalogClose"
      :close-on-click-modal="false"
    >
      <LPTablePage
        :show-page="false"
        :show-index="dialogTitle == '优惠券明细' ? true : false"
        :show-indexfixed="true"
        index-label="序号"
        :table-data="dialogTableData"
        :table-column="dialogTableColumn"
        height="500"
        align="center"
        class="table"
      />
      <span slot="footer" class="dialog-footer">
        <el-button type="" size="medium" @click="dilalogClose">关闭</el-button>
        <!-- <el-button  type="primary" size="medium" >保存</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserAmountDis,
  getCouponRecordAll,
  deleteUserAmountDis,
  getUserAmountDisById,
  doRechargeUserAmountDis,
  doNotRechargeUserAmountDis,
  excelUserAmountDisStandardExcel
} from '@/api/LaborProtection/amountStandard'
import { operationLog } from '@/api/LaborProtection/operationLog'
import { download, parseTime } from '@/utils/lpUtils.js'
import { render } from 'nprogress'
import LPTablePage from '@/components/LPTablePage/index.vue'
import LPSearchBar from '@/components/LPSearchBar/index.vue'

export default {
  components: { LPTablePage, LPSearchBar },
  data() {
    return {
      searchModel: {},
      searchData: [
        { label: '', placeholder: '员工工号', prop: 'jobNum' },
        { label: '', placeholder: '员工姓名', prop: 'realName' },
        { label: '', placeholder: '员工部门', prop: 'departmentName' },
        { label: '', placeholder: '员工岗位', prop: 'jobName' },
        {
          label: '',
          placeholder: '金额充值状态',
          prop: 'status',
          type: 'select',
          option: [
            { label: '未充值', value: 0 },
            { label: '已充值', value: 1 }
          ]
        },
        { label: '', type: 'datetimerange', prop: 'provideTime' }
      ],
      // 列表数据
      tableData: [],
      // 表格字段
      tableColumn: [
        { label: '发放日期', prop: 'provideTime' },
        { label: '员工工号', prop: 'jobNum' },
        { label: '员工姓名', prop: 'realName' },
        { label: '部门', prop: 'departmentName' },
        { label: '岗位', prop: 'jobName' },
        { label: '发放金额', prop: 'amount' },
        { label: '优惠券发放记录编号', prop: 'couponId', width: 350, render: true },
        { label: '金额充值状态', prop: 'statusName' }
        // { label: "操作", prop: "cz", render: true },
      ],
      dialogTableData: [],
      dialogTableColumn: [],
      dialogVisvible: false,
      dialogTitle: '',
      dialogWidth: '',
      selectionList: [],
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    dilalogClose() {
      this.dialogVisvible = false
      this.dialogTableColumn = []
      this.dialogTableData = []
    },
    // 批量充值
    batchRecharge() {
      this.$confirm('是否批量修改选中数据为已充值状态', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          const data = []
          this.selectionList.forEach((item) => {
            data.push(item.id)
          })
          doRechargeUserAmountDis(data).then((res) => {
            this.selectionList = []
            this.getList()
            this.$message.success('成功批量充值')
            this.$forceUpdate()
          })
        })
        .catch(() => {
          this.$message.info('已取消批量充值')
        })
    },
    // 批量未充值
    batchNotRecharge() {
      this.$confirm('是否批量修改选中数据为未充值状态', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          const data = []
          this.selectionList.forEach((item) => {
            data.push(item.id)
          })
          doNotRechargeUserAmountDis(data).then((res) => {
            this.selectionList = []
            this.getList()
            this.$message.success('成功批量未充值')
            this.$forceUpdate()
          })
        })
        .catch(() => {
          this.$message.info('已取消批量未充值')
        })
    },
    // 批量删除
    batchDelete() {
      this.$confirm('是否批量删除该些未充值金额数据！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.selectionList.length == 0) return this.$message.warning('请勾选需要批量删除的未充值金额数据')
          const flag = this.selectionList.filter((item) => item.orgName == '烧结工序')
          if (flag.length > 0) {
            return this.$message.error('包含已充值记录，无法批量删除。')
          }
          const data = []
          this.selectionList.forEach((item) => {
            data.push(item.id)
          })

          deleteUserAmountDis(data).then((res) => {
            this.selectionList = []
            this.getList()
            this.$message.success('删除成功！')
            this.$forceUpdate()
          })
        })
        .catch(() => {
          this.$message.info('已取消批量删除')
        })
    },
    // 导出
    exportInfo() {
      const params = {
        ...this.searchModel
      }
      if (this.searchModel.provideTime != undefined) {
        params.provideStartTime = parseTime(this.searchModel.provideTime[0])
        params.provideEndTime = parseTime(this.searchModel.provideTime[1])
        this.$delete(params, 'provideTime')
      }
      excelUserAmountDisStandardExcel(params).then((res) => {
        download(res, '库存流水记录')
      })
    },
    // 优惠券明细
    couponLinkClick(row) {
      this.dialogTitle = '优惠券明细'
      this.dialogWidth = '85%'
      this.dialogTableColumn = [
        { label: '发放记录编号', prop: 'recordId' },
        { label: '员工工号', prop: 'jobNum' },
        { label: '员工姓名', prop: 'realName' },
        { label: '物料小类名称', prop: 'smallCName' },
        { label: '物料小类编码', prop: 'smallCategoryNo' },
        { label: '物料名称', prop: 'materialName' },
        { label: '物料编码', prop: 'materialCode' },
        { label: '物料数量', prop: 'count' },
        { label: '物料单价', prop: 'pPrice' },
        { label: '金额', prop: 'pAmount' },
        { label: '优惠券名称', prop: 'couponName', width: 230 },
        // { label: "优惠券有效时间", prop: "costName", width: 130 },
        // { label: "发放频率", prop: "orgId" },
        { label: '创建时间', prop: 'createDate' }
      ]
      const data = {
        // maxResultCount: 100,
        // skipCount: 1,
        provideStartTime: parseTime(row.provideTime, '{y}-{m}-{d}'),
        provideEndTime: parseTime(row.provideTime, '{y}-{m}-{d}'),
        userName: row.realName,
        userJobNo: row.jobNum
      }
      getCouponRecordAll(data).then((res) => {
        const result = []
        if (res.items.length != 0) {
          res.items.forEach((item) => {
            result.push({
              ...row,
              ...item,
              pAmount: Math.round(item.count * item.pPrice * 100) / 100
            })
          })
        }

        this.dialogTableData = result
        this.dialogVisvible = true
      })
    },
    // 操作记录
    operationLog() {
      this.dialogWidth = ''
      this.dialogTitle = '操作记录'
      // this.dialogTableData = [{costId:'1'},{costId:'1'},{costId:'1'},{costId:'1'},{costId:'1'},{costId:'1'},{costId:'1'},{costId:'1'},{costId:'1'},{costId:'1'},{costId:'1'},{costId:'1'},{costId:'1'},{costId:'1'},{costId:'1'}]
      this.dialogTableColumn = [
        { label: '操作时间', prop: 'createTime' },
        { label: '操作人', prop: 'createName' },
        { label: '操作内容', prop: 'remark' }
      ]
      const params = {
        OperationType: 5
      }
      operationLog(params).then((res) => {
        this.dialogTableData = res.items
        this.dialogVisvible = true
      })
    },

    handleSelectionChange(val) {
      this.selectionList = val
    },
    // 查询按钮
    handleSearchSubmit() {
      this.currentPage = 1
      this.getList()
    },
    // 重置按钮
    handleSearchReset() {
      this.handleSearchSubmit()
    },
    // 获取列表
    getList() {
      const params = {
        ...this.searchModel,
        SkipCount: this.currentPage,
        MaxResultCount: this.pageSize
      }
      if (this.searchModel.provideTime != undefined) {
        params.provideStartTime = parseTime(this.searchModel.provideTime[0])
        params.provideEndTime = parseTime(this.searchModel.provideTime[1])
        this.$delete(params, 'provideTime')
      }
      getUserAmountDis(params).then((res) => {
        if (!res.error) {
          this.tableData = res.items
          this.total = res.totalCount
          this.$refs.tableMain.clearSelection()
        }
      })
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      this.getList()
    },

    handColumnClick(row, name) {
      if (name == 'update') {
        this.$router.push({
          path: '/costOrgRelation/insertOrupdateCost',
          query: {
            id: row.id
          }
        })
      } else if (name == 'delete') {
        this.$confirm('该操作将删除该条数据,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteCostOrgRelation(row.id).then((res) => {
              this.$message.success('删除成功')
              this.getList()
            })
          })
          .catch(() => {
            this.$message.info('已取消该操作')
          })
      }
    }
  }
}
</script>

<style lang="scss">
.el-form-item__label {
  font-weight: normal;
}

.el-dialog__body {
  padding-top: 0px;
}

.el-divider {
  margin-top: 5px;
}
</style>

<style lang="scss" scoped>
.auditCmpt {
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  .form-baseinfo:first-child {
    margin: 20px, 0, 20px, -10px;
    border-radius: 3px;
  }
}
.btn_area {
  background-color: #fff;
  padding: 0.2rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.inventoryList {
  .form-baseinfo {
    ::v-deep .search-bar input.el-input__inner {
      width: 1.6rem;
    }
  }

  ::v-deep .table {
    .red {
      color: $high_risk_color;
    }
  }
}
</style>
